@keyframes fx-animation-time-picker-show {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.fx-time-picker {
  display: inline-block;
  border: 1px solid $border-color-default;
  border-radius: $border-radius-default;
  padding: 3px 10px;
  background-color: $color-white;

  &.focus {
    border-color: $color-primary;
  }

  > .time-picker-input {
    display: inline-flex;
    align-items: center;
    height: $height-default;
    line-height: $height-default;

    > .rang {
      display: inline-block;
    }

    > input {
      text-align: center;
      width: 120px;
      height: 100%;
    }
  }

  > .time-picker-dropdown {
    margin: 10px 0;
    position: fixed;
    background-color: $color-white;
    animation: fx-animation-time-picker-show 0.15s forwards;
    transform-origin: top center;

    &::after {
      content: '';
      position: absolute;
      top: -12px;
      left: 35px;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      margin-right: 3px;
      border-bottom-color: $color-white;
      border-width: 6px;
      filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
    }

    &.top {
      transform-origin: bottom center !important;
    }

    > .content {
      width: 100%;
      display: flex;
      padding: 10px;
      box-sizing: border-box;
    }

    > .footer {
      padding: 10px 15px;
      border-top: 1px solid $border-color-default;
      display: flex;
      justify-content: flex-end;
    }
  }
}

.fx-time-picker-item {
  flex: 1;
  padding: 5px;
  text-align: center;

  > .title {
    height: 24px;
    line-height: 24px;
    padding-bottom: 10px;
  }

  > .picker-list {
    display: flex;
    height: 190px;
    position: relative;
    border: 1px solid $border-color-default;
    border-radius: $border-radius-default;

    &::before, &::after {
      content: '';
      width: 100%;
      height: 1px;
      background-color: #ccc;
      position: absolute;
      top: calc((190px - #{$height-default}) / 2);
    }

    &::after {
      top: calc((190px - #{$height-default}) / 2 + #{$height-default});
    }

    > .list {
      height: 100%;
      flex: 1;
      text-align: center;
      overflow-y: auto;

      &::-webkit-scrollbar-thumb {
        background-color: transparent;
      }

      > ul {
        padding: calc((190px - #{$height-default}) / 2) 0;

        > li {
          cursor: pointer;
          height: $height-default;
          line-height: $height-default;

          &:hover {
            color: $color-primary;
          }
        }
      }
    }
  }
}

.fx-time-picker-scroll {
  height: 100%;
  flex: 1;
  text-align: center;
  overflow-y: auto;
  user-select: none;

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }

  > ul {
    padding: calc((190px - #{$height-default}) / 2) 0;

    > li {
      cursor: pointer;
      height: $height-default;
      line-height: $height-default;
      color: $font-color-default;

      &.active {
        color: $font-color-important;
        font-weight: bolder;
      }

      &.disabled {
        color: $font-color-lowest;
        cursor: not-allowed;
      }

      &:hover {
        color: $color-primary;
      }
    }
  }
}
